<template>
  <div class="clothingPic">
    <uploader
      :options="options"
      :file-status-text="statusText"
      :auto-start="false"
      class="uploader-example"
      ref="uploader"
      @file-added="onFileAdded"
      @file-success="onFileSuccess"
      @file-error="onFileError"
      @file-removed="fileRemoved"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <uploader-btn :attrs="attrs" style="background-color: #67c13b"
          ><i class="el-icon-upload" style="margin-right: 5px"></i
          >上传文件</uploader-btn
        >
        <uploader-btn :directory="true" style="background-color: #79bbff"
          ><i class="el-icon-folder-add" style="margin-right: 5px"></i
          >上传文件夹</uploader-btn
        >
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
    <div slot="footer" class="dialog-footer" style="margin-top: 20px">
      <span class="filetotal">共计: {{ this.file_total }}</span>
      <el-button
        type="danger"
        plain
        @click="errorDialog = true"
        v-show="controllerErrorFileDialog"
        >错误信息</el-button
      >
      <el-button @click="cancelUpload">取消上传</el-button>
      <el-button type="primary" @click="submitUpload">开始上传</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "clothingPic",
  data() {
    return {
      options: {
        target: "/dict/ClothingPices/AddFile", //即分片上传的URL
        maxChunkRetries: 2,
        testChunks: true, //是否开启服务器分片校验
        fileParameterName: "file",
        chunkSize: 1024 * 1024 * 1024, //1MB
        simultaneousUploads: 3, //并发上传数
        // query: {
        //   type: "",
        //   create_time: "",
        // },
        // headers: {
        //   "Content-Type": "multipart/form-data; charset=utf-8", //multipart/form-data application/json
        // },
      },
      statusText: {
        success: "上传成功",
        error: "上传失败",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      },
      attrs: {
        accept: [],
      },
      file_total: 0, //本次文件上传的总数
      errorfilelist: [], //上传失败信息列表
      controllerErrorFileDialog: false,
      uploadType: ["png", "xlsx", "xls", "pdf", "dmp", "jpg", "sql"],
    };
  },
  methods: {
    //添加文件到列表还未上传,每添加一个文件，就会调用一次,在这里过滤并收集文件夹中文件格式不正确信息，同时把所有文件的状态设为暂停中
    onFileAdded(file) {
      let file_type = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = this.uploadType.indexOf(file_type);
      if (extension < 0) {
        let obj = {
          rootname: "无",
          name: file.name,
          errorinfo: "文件不是 " + this.uploadType + " 格式",
        };
        let arr = file.relativePath.split("/");
        if (arr.length > 1) {
          obj["rootname"] = arr[0];
        }
        this.errorfilelist.push(obj);
        file.ignored = true;
      } else {
        file.pause();
      }
      this.$nextTick(() => {
        this.file_total = this.$refs["uploader"].files.length;
        console.log(this.file_total);
      });
      if (this.errorfilelist.length !== 0) {
        this.controllerErrorFileDialog = true;
      }
    },

    //每个文件传输给后端之后，返回的信息
    onFileSuccess(rootFile, file, response, chunk) {
      let res = JSON.parse(response);
      console.log(res);
      if (res.code !== 300) {
        let obj = {
          rootname: "无",
          name: file.name,
          errorinfo: res.message,
        };
        if (rootFile.isFolder === true) {
          obj["rootname"] = rootFile.name;
        }
        this.errorfilelist.push(obj);
        this.controllerErrorFileDialog = true;
      }
    },
    // 上传错误触发，文件还未传输到后端
    onFileError(rootFile, file, response, chunk) {
      let obj = {
        rootname: "无",
        name: file.name,
        errorinfo: "文件上传失败",
      };
      if (rootFile.isFolder === true) {
        obj["rootname"] = rootFile.name;
      }
      this.errorfilelist.push(obj);
      this.controllerErrorFileDialog = true;
    },
    // 移除文件
    fileRemoved(file) {
      this.$nextTick(() => {
        this.file_total = this.$refs["uploader"].files.length;
      });
    },
    //点击开始上传按钮
    submitUpload() {
      console.log("submitUpload");
      this.$nextTick(() => {
        for (var i = 0; i < this.$refs["uploader"].files.length; i++) {
          this.$refs["uploader"].files[i].resume();
          console.log(this.$refs["uploader"].files[i]);
        }
      });
      console.log("submitUploaded");
    },
    //关闭错误文件提示框口，知道上传对话框被关闭时才会被清空
    closeErrorDialog() {
      this.errorDialog = false;
    },
    // 上传弹框关闭
    handelClose() {
      this.clearcache();
      this.thirdDialog = false;
    },
    // 清除缓存
    clearcache() {
      this.file_total = 0;
      this.errorfilelist = [];
      this.controllerErrorFileDialog = false;
      this.$refs.uploader.uploader.cancel();
      this.getresourceDetail();
    },
    //取消上传
    cancelUpload() {
      this.thirdDialog = false;
      this.clearcache();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.clothingPic {
  text-align: left;
}
// 文件上传组件
.uploader-example {
  width: 90%;
  padding: 15px;
  margin: 0 auto 0;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 8px;
  color: #ffffff;
  border: #ffffff;
}
/deep/ .uploader-example .uploader-list {
  max-height: 300px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  .uploader-file[status="uploading"] > .uploader-file-info {
    > .uploader-file-status > span > i {
      visibility: hidden;
    }
    > .uploader-file-status > span > em {
      visibility: hidden;
    }
  }
}
</style>
